<template>
  <s-layout title="发布任务" class="set-userinfo-wrap">
    <uni-forms
      :model="state.model"
      :rules="state.rules"
      labelPosition="left"
      border
      class="form-box" >
      <view class="ss-flex ss-row-center ss-col-center ss-p-t-60 ss-p-b-0 bg-white">
        <view class="header-box-content">
          <su-image
            class="content-img"
            isPreview
            :current="0"
            :src="sheep.$url.cdn(state.model.img)"
            :height="160"
            :width="160"
            mode="scaleToFill"
          ></su-image>
          <!-- :radius="80" -->

          <view class="avatar-action">
            <!-- #ifdef MP -->
            <button
              class="ss-reset-button avatar-action-btn"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
              >封面图</button
            >
            <!-- #endif -->
            <!-- #ifndef MP -->
            <button class="ss-reset-button avatar-action-btn" @tap="onChangeAvatar">封面图</button>
            <!-- #endif -->
          </view>
        </view>
      </view>

    <view class="bg-white ss-p-x-30">



		<uni-forms-item name="tid" label="任务类型">
				  <uni-data-select
					v-model="state.model.tid"
					:localdata="state.range"
					@change="change"
				  ></uni-data-select>
		</uni-forms-item> 
		
        <uni-forms-item name="task_title" label="任务标题">
          <uni-easyinput
            v-model="state.model.task_title"
            type="task_title"
            placeholder="请设置任务标题"
            :inputBorder="false"
            :placeholderStyle="placeholderStyle"
          />
        </uni-forms-item>


		 <uni-forms-item name="task_url" label="任务地址">
		   <uni-easyinput
			 v-model="state.model.task_url"
			 type="task_url"
			 placeholder="请设置任务地址"
			 :inputBorder="false"
			 :placeholderStyle="placeholderStyle"
		   />
		 </uni-forms-item>

		 
        <uni-forms-item
          name="content"
          label="任务描述"
          :formItemStyle="{ alignItems: 'flex-start' }"
          :labelStyle="{ lineHeight: '5em' }"
          class="textarea-item"
        >
          <uni-easyinput
            :inputBorder="true"
            type="textarea"
            v-model="state.model.content"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            placeholder="请设置任务描述"
            clearable
          ></uni-easyinput>
        </uni-forms-item>
		
		<uni-forms-item name="task_endtime" label="截止时间">
		    <view class="example-body">
				<uni-datetime-picker type="datetime" v-model="state.model.task_endtime" :clearIcon="false" />
			</view>
		</uni-forms-item>
		
		<uni-forms-item name="task_price" label="任务原价">
		  <uni-easyinput
					 v-model="state.model.task_price"
					 type="task_price"
					 placeholder="请设置任务原价"
					 :inputBorder="false"
					 :placeholderStyle="placeholderStyle"
		  />
		</uni-forms-item>
		
		<uni-forms-item name="task_price_platform" label="任务单价">
		  <uni-easyinput
					 v-model="state.model.task_price_platform"
					 type="task_price_platform"
					 placeholder="请设置任务单价"
					 :inputBorder="false"
					 :placeholderStyle="placeholderStyle"
		  />
		</uni-forms-item>
		
		<uni-forms-item name="task_num" label="任务数量">
		  <uni-easyinput
					 v-model="state.model.task_num"
					 type="task_num"
					 placeholder="请设置任务总数量"
					 :inputBorder="false"
					 :placeholderStyle="placeholderStyle"
		  />
		</uni-forms-item>

    <uni-forms-item name="task_num_single" label="单次领取">
		  <uni-easyinput
					 v-model="state.model.task_num_single"
					 type="task_num_single"
					 placeholder="请设置用户单次可领取任务数"
					 :inputBorder="false"
					 :placeholderStyle="placeholderStyle"
		  />
		</uni-forms-item>


      </view>

  
    </uni-forms>

    <button type="primary" style="width: 95%;margin-top:20rpx;background:#FE791E;border-radius:50rpx" @tap="onSubmit">提交发布</button>

    <!-- <su-fixed bottom placeholder bg="none">
      <view class="footer-box ss-p-20">
        <button class=""  @tap="onSubmit">提交发布</button>
      </view>
    </su-fixed> -->
  </s-layout>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
import { mobile, password, username,pay_password } from '@/sheep/validate/form';
import sheep from '@/sheep';
import { clone } from 'lodash';
import { showAuthModal } from '@/sheep/hooks/useModal';
import { onLoad } from '@dcloudio/uni-app';


const value = ref(0)


function change(e){
  console.log(e,'e')
	state.model.tid = e
}

const state = reactive({
  model: {},
  range:{}
});

const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';


// 修改手机号
const onChangeMobile = () => {
  showAuthModal('changeMobile');
};

function onChooseAvatar(e) {
  const tempUrl = e.detail.avatarUrl || '';
  uploadAvatar(tempUrl);
}

//修改头像
function onChangeAvatar() {
  uni.chooseImage({
    success: async (chooseImageRes) => {
      const tempUrl = chooseImageRes.tempFilePaths[0];
      console.log(onChangeAvatar)
      uploadAvatar(tempUrl);
    },
  });
}

async function uploadAvatar(tempUrl) {
  if (!tempUrl) return;
  let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
  state.model.img = url;
}



// 保存信息
async function onSubmit() {
	console.log(state.model)
  const res = await sheep.$api.task.createTask(state.model);
  console.log(res)
  if(res.code == 1){
    sheep.$helper.toast(res.msg);
    state.model = {}
  }


}


async function getTaskType(){
  const res = await sheep.$api.task.getTaskType();
   if(res.code == 1){
      console.log(res.data)

      state.range = res.data
   }
}
// const getTaskType = async () => {
//   const userInfo = await sheep.$store('task').getTaskType();
//   console.log(userInfo)

// };

// onBeforeMount(async () => {
//   getTaskType();
// });
onLoad(async () => {
  getTaskType();
})
</script>

<style lang="scss" scoped>

	
	
:deep() {



  .uni-list-item__content-title {
    font-size: 28rpx !important;
    color: #333333 !important;
    line-height: normal !important;
  }

  .uni-icons {
    font-size: 40rpx !important;
  }

  .is-disabled {
    color: #333333;
  }
}

:deep(.disabled) {
  opacity: 1;
}

.gender-name {
  font-size: 28rpx;
  font-weight: 500;
  line-height: normal;
  color: #333333;
}

.title-box {
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
  line-height: 100rpx;
}

.logout-btn {
  width: 710rpx;
  height: 80rpx;
  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: $white;
}

.radio-dark {
  filter: grayscale(100%);
  filter: gray;
  opacity: 0.4;
}

.content-img {
  //border-radius: 50%;
}
.header-box-content {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  overflow: hidden;
  //border-radius: 50%;
}
.avatar-action {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
  width: 160rpx;
  height: 46rpx;
  background: rgba(#000000, 0.3);

  .avatar-action-btn {
    width: 160rpx;
    height: 46rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }
}

// 绑定项
.account-list {
  background-color: $white;
  height: 100rpx;
  padding: 0 20rpx;

  .list-img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }

  .list-name {
    font-size: 28rpx;
    color: #333333;
  }

  .info {
    .avatar {
      width: 38rpx;
      height: 38rpx;
      border-radius: 50%;
      overflow: hidden;
    }

    .name {
      font-size: 28rpx;
      font-weight: 400;
      color: $dark-9;
    }
  }

  .bind-box {
    width: 100rpx;
    height: 50rpx;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;

    .bind-btn {
      width: 100%;
      height: 100%;
      border-radius: 25rpx;
      background: #f4f4f4;
      color: #999999;
    }
    .relieve-btn {
      width: 100%;
      height: 100%;
      border-radius: 25rpx;
      background: var(--ui-BG-Main-opacity-1);
      color: var(--ui-BG-Main);
    }
  }
}

.list-border {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  border-bottom: 2rpx solid #eeeeee;
}

image {
  width: 100%;
  height: 100%;
}



</style>
